/* Make react-grid-layout resize handles more visible */
.react-resizable-handle {
  background-color: rgba(255, 109, 4, 0.3) !important;
  border: 2px solid #ff6d04 !important;
  border-radius: 2px !important;
  transition: all 0.2s ease !important;
  opacity: 0 !important;
  /* Hide any text content or symbols */
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Hide the default ::after and ::before content */
.react-resizable-handle::after,
.react-resizable-handle::before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
}

.react-resizable-handle:hover {
  background-color: rgba(255, 109, 4, 0.5) !important;
}

/* Show handles only for selected items */
.react-grid-item.ui-draggable-dragging .react-resizable-handle,
.react-grid-item.ui-resizable-resizing .react-resizable-handle,
.react-grid-item.selected .react-resizable-handle {
  opacity: 1 !important;
}

/* All resize handles - same size and color */
.react-resizable-handle.react-resizable-handle-e,
.react-resizable-handle.react-resizable-handle-w,
.react-resizable-handle.react-resizable-handle-n,
.react-resizable-handle.react-resizable-handle-s,
.react-resizable-handle.react-resizable-handle-se,
.react-resizable-handle.react-resizable-handle-sw,
.react-resizable-handle.react-resizable-handle-ne,
.react-resizable-handle.react-resizable-handle-nw {
  background-color: #ff6d04 !important;
  border-radius: 50% !important;
  width: 12px !important;
  height: 12px !important;
}

/* Position edge handles */
.react-resizable-handle.react-resizable-handle-e {
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.react-resizable-handle.react-resizable-handle-w {
  left: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.react-resizable-handle.react-resizable-handle-n {
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.react-resizable-handle.react-resizable-handle-s {
  bottom: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Position corner handles */
.react-resizable-handle.react-resizable-handle-se {
  right: -6px !important;
  bottom: -6px !important;
}

.react-resizable-handle.react-resizable-handle-sw {
  left: -6px !important;
  bottom: -6px !important;
}

.react-resizable-handle.react-resizable-handle-ne {
  right: -6px !important;
  top: -6px !important;
}

.react-resizable-handle.react-resizable-handle-nw {
  left: -6px !important;
  top: -6px !important;
}

/* Hover effect for all handles */
.react-resizable-handle:hover {
  background-color: #ff8533 !important;
  transform: scale(1.2) !important;
}

/* Override react-grid-layout placeholder color */
.react-grid-placeholder {
  background-color: #e0e0e0 !important;
  border: 2px dashed #bdbdbd !important;
  border-radius: 4px !important;
  opacity: 0.5 !important;
}
